<template>
	<view class="container">
		<!-- 导航栏 -->
		<nav-bar title="商品详情"></nav-bar>
		
		<!-- 页面内容容器 -->
		<view class="page-content has-nav-bar">
		<!-- 商品图片轮播 -->
		<view class="product-header">
			<swiper class="swiper" indicator-dots autoplay circular :indicator-active-color="'#FF6600'">
				<swiper-item v-if="productInfo.image">
					<image :src="formatImageUrl(productInfo.image)" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item v-else>
					<image src="/static/logo.png" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 商品基本信息 -->
		<view class="product-info">
			<view class="product-title">{{ productInfo.name }}</view>
			<view class="product-price">¥ {{ productInfo.price }}</view>
			<view class="product-sales">销量: {{ productInfo.sales || 0 }} | 库存: {{ productInfo.stock || 0 }}</view>
			<view class="product-desc">{{ productInfo.description }}</view>
		</view>
		
		<!-- 视频展示区域 -->
		<view class="product-video" v-if="productInfo.videoUrl">
			<view class="section-title">视频展示</view>
			<view class="video-container">
				<video 
					:src="formatVideoUrl(productInfo.videoUrl)" 
					controls 
					:poster="formatImageUrl(productInfo.image)"
					class="product-video-player"
				></video>
			</view>
		</view>
		
		<!-- 商品规格选择 -->
		<view class="product-specs" v-if="productSpecs.length > 0">
			<view class="specs-title">规格选择</view>
			<view class="specs-list">
				<view 
					class="spec-item" 
					v-for="(spec, index) in productSpecs" 
					:key="index"
					:class="{ active: selectedSpec === spec.id }"
					@click="selectSpec(spec.id)"
				>
					{{ spec.name }}
				</view>
			</view>
		</view>
		
		<!-- 商品数量选择 -->
		<view class="quantity-selector">
			<view class="selector-title">购买数量</view>
			<view class="selector-content">
				<view class="quantity-btn" @click="decreaseQuantity">-</view>
				<input class="quantity-input" type="number" v-model="quantity" />
				<view class="quantity-btn" @click="increaseQuantity">+</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="action-icons">
				<view class="icon-item" @click="goToHome">
					<text class="iconfont">🏠</text>
					<text class="icon-text">首页</text>
				</view>
				<view class="icon-item" @click="goToCart">
					<text class="iconfont">🛒</text>
					<text class="icon-text">购物车</text>
					<text class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</text>
				</view>
			</view>
			<view class="action-buttons">
			<view class="action-btn add-cart" @click="addToCart">加入购物车</view>
			<view class="action-btn buy-now" @click="buyNow">立即购买</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import { getAllPetVideos, getPetById } from '../../src/api/pet.js';

	export default {
		components: {
			NavBar
		},
		data() {
			return {
				productId: '',
			quantity: 1,
			selectedSpec: null,
			cartCount: 0,
				productInfo: {
				id: '',
				name: '加载中...',
				price: '0.00',
				description: '',
				detail: '',
				stock: 0,
				sales: 0,
				image: ''
			},
			productSpecs: []
			}
		},
		onLoad(options) {
			// 获取商品ID
			if (options.id) {
				this.productId = options.id;
				// 根据ID获取商品信息
				this.getProductDetail();
			} else {
				uni.showToast({
					title: '商品信息获取失败',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
		// 获取商品详情
			getProductDetail() {
			uni.showLoading({
				title: '加载中...'
			});
			
			// 首先尝试从productApi获取数据
			this.$api.productApi.getDetail(this.productId)
				.then(res => {
					uni.hideLoading();
					if (res && res.code === 200 && res.data) {
						// 处理Product数据
						this.productInfo = res.data;
						
						// 处理规格
						if (this.productInfo.specs && this.productInfo.specs.length > 0) {
							this.productSpecs = this.productInfo.specs;
							this.selectedSpec = this.productSpecs[0].id;
						}
						
						// 检查是否有关联视频
						this.checkRelatedVideo();
						
						console.log('成功获取商品详情:', this.productInfo);
					} else {
						// 如果productApi获取失败，尝试从petApi获取数据
						this.getPetDetail();
					}
				})
				.catch(err => {
					console.error('获取商品详情失败，尝试获取宠物详情:', err);
					// 尝试从petApi获取数据
					this.getPetDetail();
				});
		},
		
		// 获取宠物详情
		getPetDetail() {
			getPetById(this.productId)
				.then(res => {
					uni.hideLoading();
					if (res && res.code === 200 && res.data) {
						// 将Pet数据映射到productInfo格式
						const petData = res.data;
						this.productInfo = {
							id: petData.id,
							name: petData.name || '未命名宠物',
							price: petData.price || 0,
							description: petData.description || '',
							detail: petData.description || '',
							stock: 1, // 宠物通常只有一个
							sales: 0, // 后端暂无此数据
							image: petData.img || petData.avatar || '',
							videoUrl: petData.avatar // 使用宠物的avatar作为视频URL
						};
						
						console.log('成功获取宠物详情:', this.productInfo);
					} else {
						uni.showToast({
							title: res?.message || '商品信息获取失败',
							icon: 'none'
						});
						
						// 使用模拟数据
						this.useDefaultData();
					}
				})
				.catch(err => {
					uni.hideLoading();
					console.error('获取宠物详情也失败:', err);
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
					
					// 使用模拟数据
					this.useDefaultData();
				});
		},
		
		// 检查是否有关联视频
		checkRelatedVideo() {
			// 如果已经有视频URL，则不需要再获取
			if (this.productInfo.videoUrl) return;
			
			// 根据商品ID查找关联的宠物视频
			getAllPetVideos()
				.then(res => {
					if (res && res.code === 200 && res.data && res.data.length > 0) {
						// 查找与当前商品关联的宠物视频
						const relatedPet = res.data.find(pet => pet.productId == this.productId);
						if (relatedPet && relatedPet.avatar) {
							// 更新商品信息，添加视频URL
							this.productInfo.videoUrl = relatedPet.avatar;
							console.log('找到关联视频:', relatedPet.avatar);
						}
					}
				})
				.catch(err => {
					console.error('获取关联视频失败:', err);
				});
		},
		
		// 使用默认模拟数据
		useDefaultData() {
			setTimeout(() => {
				this.productInfo = {
					id: this.productId,
					name: '宠物商品',
					price: '199.00',
					description: '优质宠物商品，适合各种宠物',
					stock: 100,
					sales: 1234,
					image: '/static/logo.png'
				};
			}, 500);
		},
		// 获取购物车数量
		getCartCount() {
			this.$api.cartApi.getCount()
				.then(res => {
					if (res && res.code === 200) {
						this.cartCount = res.data;
					}
				})
				.catch(err => {
					console.error('获取购物车数量失败:', err);
				});
		},
		// 选择规格
		selectSpec(specId) {
			this.selectedSpec = specId;
		},
		// 减少数量
		decreaseQuantity() {
			if (this.quantity > 1) {
				this.quantity--;
			}
		},
		// 增加数量
		increaseQuantity() {
			if (this.quantity < (this.productInfo.stock || 999)) {
				this.quantity++;
			} else {
				uni.showToast({
					title: '已达最大库存',
					icon: 'none'
				});
			}
		},
		// 加入购物车
			addToCart() {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/index'
					});
				}, 1500);
				return;
			}
			
			const cartData = {
				productId: parseInt(this.productId),
				quantity: this.quantity,
				spec: this.selectedSpec
			};
			
			this.$api.cartApi.add(cartData)
				.then(res => {
					if (res && res.code === 200) {
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
						});
						// 更新购物车数量
						this.getCartCount();
					} else {
						uni.showToast({
							title: res?.message || '加入购物车失败',
							icon: 'none'
						});
					}
				})
				.catch(err => {
					console.error('加入购物车失败:', err);
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
				});
			},
		// 立即购买
			buyNow() {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/index'
					});
				}, 1500);
				return;
			}
			
			// 构建购买参数
			const buyParams = {
				products: [{
					id: this.productId,
					quantity: this.quantity,
					specId: this.selectedSpec
				}]
			};
			
			// 将购买信息存储到本地
			uni.setStorageSync('buyNowInfo', JSON.stringify(buyParams));
			
			// 跳转到确认订单页面
			uni.navigateTo({
				url: '/pages/order/confirm?buyNow=1'
			});
		},
		// 跳转到首页
		goToHome() {
			uni.switchTab({
				url: '/pages/shop/index'
			});
		},
		// 跳转到购物车
		goToCart() {
			uni.switchTab({
				url: '/pages/cart/index'
				});
			},
		// 处理图片URL
		formatImageUrl(imageUrl) {
			if (!imageUrl) {
				console.log('商品详情-图片URL为空，使用默认图片');
				return '/static/logo.png';
			}
			
			console.log('商品详情-处理图片URL:', imageUrl);
			
			// 处理Windows绝对路径
			if (imageUrl.includes('\\') || imageUrl.includes(':\\')) {
				// 从绝对路径中提取文件名
				const parts = imageUrl.split('\\');
				const filename = parts[parts.length - 1];
				// 使用相对路径访问
				console.log('商品详情-处理Windows路径，提取文件名:', filename);
				return 'http://localhost:8081/images/' + filename;
			}
			
			// 处理相对路径
			if (imageUrl.startsWith('/')) {
				console.log('商品详情-处理相对路径:', 'http://localhost:8081' + imageUrl);
				return 'http://localhost:8081' + imageUrl;
			}
			
			// 已经是完整URL
			if (imageUrl.startsWith('http')) {
				console.log('商品详情-使用完整URL:', imageUrl);
				return imageUrl;
			}
			
			console.log('商品详情-使用默认处理:', '/static/logo.png');
			// 默认使用静态资源
			return '/static/logo.png';
		},
		// 处理视频URL
		formatVideoUrl(videoUrl) {
			if (!videoUrl) {
				console.log('商品详情-视频URL为空，使用默认视频');
				return '/static/logo.mp4';
			}
			
			console.log('商品详情-处理视频URL:', videoUrl);
			
			// 处理Windows绝对路径
			if (videoUrl.includes('\\') || videoUrl.includes(':\\')) {
				// 从绝对路径中提取文件名
				const parts = videoUrl.split('\\');
				const filename = parts[parts.length - 1];
				// 使用相对路径访问
				console.log('商品详情-处理Windows路径，提取文件名:', filename);
				return 'http://localhost:8081/videos/' + filename;
			}
			
			// 处理相对路径
			if (videoUrl.startsWith('/')) {
				console.log('商品详情-处理相对路径:', 'http://localhost:8081' + videoUrl);
				return 'http://localhost:8081' + videoUrl;
			}
			
			// 已经是完整URL
			if (videoUrl.startsWith('http')) {
				console.log('商品详情-使用完整URL:', videoUrl);
				return videoUrl;
			}
			
			console.log('商品详情-使用默认处理:', '/static/logo.mp4');
			// 默认使用静态资源
			return '/static/logo.mp4';
		}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 100rpx;
 background-color: #f8f8f8;
	}
	
	.product-header {
		width: 100%;
		height: 750rpx;
	}
	
	.swiper {
		width: 100%;
		height: 100%;
	}
	
	.swiper image {
		width: 100%;
		height: 100%;
	}
	
	.product-info {
 padding: 30rpx;
		background-color: #FFFFFF;
	margin-bottom: 20rpx;
	}
	
 .product-title {
 font-size: 34rpx;
		font-weight: bold;
		line-height: 1.5;
 margin-bottom: 16rpx;
	}
	
 .product-price {
 font-size: 40rpx;
		color: #FF6600;
 font-weight: bold;
 margin-bottom: 16rpx;
}

.product-sales {
 font-size: 26rpx;
	color: #999;
 margin-bottom: 16rpx;
	}
	
 .product-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

.product-specs {
 padding: 30rpx;
 background-color: #FFFFFF;
 margin-bottom: 20rpx;
}

.specs-title {
 font-size: 30rpx;
 font-weight: bold;
 margin-bottom: 20rpx;
}

.specs-list {
 display: flex;
 flex-wrap: wrap;
}

.spec-item {
 padding: 10rpx 30rpx;
 border: 1rpx solid #ddd;
 border-radius: 30rpx;
 margin-right: 20rpx;
 margin-bottom: 20rpx;
 font-size: 26rpx;
 color: #333;
}

.spec-item.active {
 background-color: #FFF0E5;
 color: #FF6600;
 border-color: #FF6600;
}

.quantity-selector {
 padding: 30rpx;
 background-color: #FFFFFF;
 margin-bottom: 20rpx;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.selector-title {
 font-size: 30rpx;
 font-weight: bold;
}

.selector-content {
 display: flex;
 align-items: center;
}

.quantity-btn {
 width: 60rpx;
 height: 60rpx;
 border: 1rpx solid #ddd;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 36rpx;
 color: #333;
}

.quantity-input {
 width: 80rpx;
 height: 60rpx;
 border-top: 1rpx solid #ddd;
 border-bottom: 1rpx solid #ddd;
 text-align: center;
 font-size: 28rpx;
}
	



	
 .bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		border-top: 1rpx solid #EEEEEE;
 }

.action-icons {
 display: flex;
 width: 30%;
}

.icon-item {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 position: relative;
}

.iconfont {
 font-size: 40rpx;
 color: #999;
}

.icon-text {
 font-size: 20rpx;
 color: #999;
 margin-top: 4rpx;
}

.cart-badge {
 position: absolute;
 top: 0;
 right: 20rpx;
 background-color: #FF6600;
 color: #fff;
 font-size: 20rpx;
 min-width: 32rpx;
 height: 32rpx;
 border-radius: 16rpx;
 text-align: center;
 line-height: 32rpx;
}

.action-buttons {
 display: flex;
 width: 70%;
 }
	
 .action-btn {
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	
 .add-cart {
		background-color: #FF9500;
	}
	
 .buy-now {
		background-color: #FF6600;
	}

.product-video {
 padding: 30rpx;
 background-color: #FFFFFF;
 margin-bottom: 20rpx;
}

.video-container {
 position: relative;
 padding-top: 56.25%; /* 16:9 aspect ratio */
}

.product-video-player {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.section-title {
 font-size: 30rpx;
 font-weight: bold;
 margin-bottom: 20rpx;
}
</style> 